<template>
	<div class="page">
		<div class="paper">
			<div class="title">
				<div class="find">
					<el-input class="input" v-model="query.staffName" placeholder="请输入内容" />
					<el-button plain style="background-color: #D3D3D3;" v-on:click="list()">查询</el-button>
					<el-button plain style=" background-color: slateblue; color: white;" @click="insert()">
						添加
					</el-button>
				</div>
			</div>
			<div class="fromTbale">
				<form>
					<el-table :data="RoleData" style="width: 100%">
						<el-table-column type="index" label="编号" width="100">
						</el-table-column>
						<el-table-column prop="roleName" label="角色名称" width="150">
						</el-table-column>
						<el-table-column prop="createtime" label="创建时间" width="150">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.row.roleId)">编辑</el-button>
								<el-button size="mini" type="danger" @click="deleteById(scope.row.roleId)">删除</el-button>
								<el-button size="mini" @click="gopermission(scope.row.roleId)">关联角色</el-button>
							</template>
						</el-table-column>
					</el-table>
				</form>
			</div>
			<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="1000px">
				<LoroleEdit v-if="show" :show.sync="show" @getData="list()" :editid="editid"></LoroleEdit>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import LoroleEdit from "@/views/lorole/edit"
	export default{
		name:'Lorole',
		data() {
					return {
						RoleData: [],
						query: {
							roleName: '',
							current: 1,
							pageSize: 5
						},
						total: 10,
						show: false,
						editid: null,
						title: ''
					}
				},
				methods: {
					list() {
						this.axios.get('/role/list', eq => {
							console.log(eq.obj);
							this.RoleData = eq.obj;
							this.query.current = eq.obj.current;
							this.total = eq.obj.total;
						}, this.query);
					},
					handleEdit(roleId) {
						this.title = "修改";
						this.editid = roleId;
						this.show = true;
					},
					insert() {
						this.title = "新增";
						this.editid = null;
						this.show = true;
					},
					deleteById(id) {
						this.axios.get('/role/delete?id=' + id, eq => {
							if (eq.obj) {
								this.$message({
									message: "删除成功",
									type: 'success'
								});
							} else {
								this.$message({
									message: '删除失败',
									type: 'error'
								});
							}
							this.list();
						})
					},
					gopermission(roleId) {
						this.$router.push({
							path: '/role-permiss',
							query: {
								roleId: roleId
							}
						})
					}
				},
				created() {
					this.list();
				},
				components: {
					LoroleEdit
				}
			}
		</script>
		
		<style >
			.page {
				color: #000000;
		
			}
		
		
			.paper {
				margin-left: 20px;
				margin-top: 20px;
				box-shadow: 7px 6px 5px lightgray;
				width: 100%;
				height: 100%;
			}
		
			.title {
				padding-bottom: 10px;
		
				border-bottom: 1px solid lightgray;
			}
		
			.title .find {
				display: flex;
				margin: 0px 10px;
			}
		
			.title span {
				margin: 0px 10px;
			}
		
			.addimg {
				width: 20px;
				height: 20px;
		
			}
		
			.title .find .input {
				width: 20%;
			}
		
			.fromTbale {
				margin-top: 20px;
			}
		</style>
		